import { Button, Card, Checkbox, Form, Input } from 'antd'
import React from 'react'

export default function FormTest() {

    /**
     * 获取表单数据方式二：
     *  1. 创建form对象： [form] = Form.useForm()
     *  2. 给Form元素绑定form属性： form={form}
     *  3. 获取值：
     *     1. 获取全部表达数据的值：form.getFieldsValue()
     *     2. 获取指定表单数据的值：form.getFieldValue('username')
     *  4. 重置表单数据
     *     1.  form.resetFields()
     *     2. 
     */
    const [form] = Form.useForm()
    // 获取表单数据方式一：通过参数获取
    function onFinish(value: any) {
        console.log('onFinish', value)
        console.log('useForm: ', form.getFieldsValue())
        form.getFieldValue('username')
    }

    /**
     * 重置表单数据
     */
    function reset() {
        form.resetFields()
    }
    return (
        <div>
            <h3>Form表单</h3>
            <Card>
                <Form
                    form={form}
                    name="basic"
                    // 文字宽度
                    labelCol={{ span: 8 }}
                    // 表单宽度
                    wrapperCol={{ span: 16 }}
                    // 最大宽度
                    style={{ maxWidth: 600 }}
                    // 表单初始值
                    initialValues={{ remember: true, password: 123123, username: 'atguigu' }}
                    // 提交表单触发的回调
                    onFinish={onFinish}
                // onFinishFailed={onFinishFailed}
                >
                    <Form.Item
                        label="Username"
                        name="username"
                        rules={[{ required: true, message: 'Please input your username!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="Password"
                        name="password"
                        rules={[{ required: true, message: 'Please input your password!' }]}
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item
                        label="手机号"
                        name="phone"
                        rules={
                            [
                                { required: true, message: '请输入手机号' },
                                // { pattern:/^1[3-9]\d{9}$/, message:'手机号不合法'}
                            ]
                        }
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
                        <Checkbox>Remember me</Checkbox>
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            Submit
                        </Button>
                        <Button onClick={reset}>
                            重置
                        </Button>
                    </Form.Item>
                </Form>
            </Card>

        </div>
    )
}
